@media screen and (max-width: 1199px) {
  /deep/ .el-carousel {
    width: 100%;
    height: 240px;
    border: 1px solid #eee;
  }
  /deep/ .el-carousel__container {
    height: 100%;
  }
  /deep/ .el-carousel__indicators {
    display: none;
  }

  .lunbo-box {
    position: relative;

    .img-box {
      .flex-center();
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      cursor: move;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      background: #f8f8f8;
      padding: 10px;
  
      img {
        max-width: 100%;
        max-height: 100%;
        max-width: 250px;
        max-height: 250px;
        // visibility: hidden;
      }
  
      .el-image {
        max-width: 100%;
        max-height: 100%;
        max-width: 250px;
        max-height: 250px;
  
        /deep/ img {
          max-width: 250px;
          max-height: 250px;
        }
      }
    }

    .mask-modal {
      display: none;
      position: absolute;
      z-index: 10000;
      left: 401px;
      top: 0;
      background-color: #eee;
      border: 1px solid #bbb;

      .mask-inner {
        width: 700px;
        height: 700px;
        img {
          width: 100%;
          max-height: 100%;
        }
      }
    }

    .lunbo-img-list {
      width: 100%;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .lunbo-img-item {
        width: 60px;
        height: 60px;
        padding: 2px;
        cursor: pointer;
        border: 1px solid transparent;
        margin-right: 20px;

        &.active {
          border: 1px solid #4CA5E4;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
